﻿/*
This CSS file should ensure that the site remains responsive when viewed
using a variety of different sized viewports, e.g. Desktop, Mobile, Tablet etc...
*/


@media screen and (max-width: 600px) {
#itemRatingsListContainer .itemRating_Rator 
{
    font-size:0.8em;
    float:left;
    width:25%;
    display:block;
    padding-top:0px;
    text-align:center;
    
}


#itemRatingsListContainer .itemRating_description
{
    border: 1px solid #aaa;
    float:left;
    width:60%;
    padding:20px;
    display:block;
    border-radius:5px;
}

.likeMe
{
    float:left;
    clear:both;
    
}

.allVideos,
.allImages
{
    height:50px;
    width:50px;
}


.allImages
{
    margin-top:-150px;
}

.allVideos
{
    margin-top:-80px;   
}

}



/*  RESPONSIVE SECTION FOR MOBILES / TABLETS */

@media screen and (max-width: 1020px) 
{
    #content-wrapper
    {   
        margin-left: 0;
        margin-right: 0;
        width:100%;
    } 
    .contentSection
    {
        border-radius:0px;
    }
    
    #footer
    {
        border-radius:0px;
    }
    
    
    #headerDetails,
    #navigation,#searchbox
    {
        float:none;
        width:auto;    
        padding-left:20px;
    }
    #sociallinks
    {
        margin-right:20px;
    }

.itemHeaderSummary,
.titleBlock
{
   float:none; 
   text-align:left;
   display:block;
   width:auto;
   clear:both;
   margin-bottom:15px;   
}
#item .titleBlock
{
    width:auto;
}
.itemTitle
{
    margin-bottom:5px;    
}
}

body
{
    color: #404040;
    font-size: 16px;
    font-family: Arial; 
    background-color:#ff6610;
}

body, body * 
{ margin:0; 
  padding:0;
}

a, .link{ text-decoration:none; color:#39f}
.link:hover
{
    text-decoration:underline;
    cursor:pointer;    
}

.hidden {display:none;}

table tr td,
table tr th
{
     vertical-align:top;    
}

.blocktext
{clear:both;
 display:block;
 margin-top:10px;
 }


.floatleft
{float:left}

.floatright
{float:right}

.cta.floatright
{
    display:block;
    margin-top:10px;    
}

ul, ol
{
    list-style-type:none;      
}

#MainText
{
    font-weight: normal;
    font-size: 1.6em;
    color: #fff;
}

#StrapLine
{
    font-weight: normal;
    font-size: 1.2em;
    color: #fff;
}
#content-wrapper
{   
    margin-left: auto;
    margin-right: auto;
    width:1000px;
}



#logo 
{
    margin-bottom:20px;
    
}

#logo .rated
{
   float:left;
   display:block;
   height:20px;
   padding:5px;
   background-color:#484848; 
   border-radius:5px 0px 0px 5px;
}

#logo .ratedType
{
   float:left;
   padding:5px;
   display:block;
   height:20px;
   background-color:#999; 
   font-weight:bold;
   border-radius:0px 5px 5px 0px;
}
#item
{
    color:#404040;
    background-color:#fff;
    border-radius: 0 7px 0 0;
    background-color:#ff6610

}
.itementry
{
}

#item .titleBlock
{
    margin-bottom:15px;      
    float:left; width:60%;
}

#item .images
{
    float:left; 
}

#item .images a
{
    margin:3px 0;
    display:block;
    text-align:center;
    font-size:0.8em;
}

#item .mainImageContainer
{
   height:auto;
   overflow:hidden; 
   width:100%;
}

#item .mainImage
{
    border-radius: 10px;
    display:block;
    width:100%;
    height:auto;
}

.memberImage
{
    border-radius:4px;
    border:1px solid #404040;
    padding:10px;
    adisplay:block;
    height:50px;
    width:50px;
}



#item .otherImage
{
    float:left;
    display:block;
    height:50px;
    width:auto;
    margin-right:5px;
    border-radius:3px;
    border:1px solid #404040;
    padding:3px;
        
}

#item .description
{
    float:left;    
    padding-right:0px;
    text-align:justify;
}

#item .description_Sidebar
{
    width: 35%;
    float: right;
    padding-left:15px;
    border-left:1px dashed #aaa;
}

h1,.itemTitle
{
    font-weight: normal;
    font-size: 1.6em;
    color: #003366;
}

h1.inline
{
    font-size:1em; display:inline;    
}

h2
{
    font-weight: normal;
    font-size: 1.4em;
    margin-bottom: 0.5em;
    color: #003366;
}

h3
{
    font-weight:bold;    
    font-size:1.1em;
    margin-bottom:0.5em;
    color : #003366;
    font-style:italic;  
}

h4
{
    font-weight:bold;    
    font-size:1em;
    color : #003366;
    margin-bottom:0.5em;
    font-style:italic;  
}

.clearboth
{clear:both;}

.clearfix:before, .clearfix:after
{
    content: " ";
    display: table;
}

.clearfix:after
{
    clear: both;
}

.clearfix
{
    *zoom: 1;
}

#header
{
    margin-bottom:20px;
}

#headerDetails
{
    float:left;
    width:50%;    
}
#navigation
{
    display:block;
    clear:both;    
}

#bodyContent
{
    float:left;
    display:block;
    border-radius:0 7px 7px 0;
    width:100%;
}

#sidebar
{
    float:left;
    display:block;
    width:200px;
    padding:10px 6px;
    color:#666;
}

.sidebarsection
{
    margin:0 0 10px 0;
    padding:0 0 10px 0;
    border-bottom:1px dashed #aaa;
        
}

#content
{
    background-color:#ff6610;
    margin-top:20px;
    border-radius:7px 7px 0 0;
    margin-bottom:0px;
}

#footer
{
    clear:both;
    padding:20px;
    background-color:#484848;
    color:#ff6610;
    border-radius: 0 0 7px 7px;
}

#sociallinks
{
    float:right;  
}


#sociallinks ul li, #navigation  ul li,.itemRating_Rating ul li, ul.stars li
{
    float:left;
    display:block;    
    text-align:center;
    font-size:1.2em;
    color: gold;
}
ul.breadcrumbTrail
{float:left;clear:none;margin-left:5px;}
.breadcrumbTrail li
{
    float:left;
    display:block;    
    text-align:center;
}
    
ul.stars li
{
  font-size:2em;  
}

#sociallinks ul li
{
    height:20px;
    width:20px; 
    margin-left:5px; 
    background-color:#ddd;
}

#navigation  ul li {}

#items li
{
    float:left;
    display:block;
    height:80px;
    width:141px;
    border:1px solid #666;
    border-radius:5px;
    margin:7px;
    background:transparent url(images/defaultitem.png) 50% 10px no-repeat;
    padding-top:150px;
}


#items li .info
{
    background:#ccc;
    color:#fff;   
    padding:10px; 
    height:60px;
    border-radius:5px;
}

.breadcrumb
{
    font-size:0.8em;    
}

.breadcrumb a
{
    font-weight:bold;    
}

button, .cta
{
    font-family:proxima-nova, sans-serif;
    background-color:#0078e7;
    color:#fff;
    padding: 8px 16px;
    border-radius:2px;
    border: 0px solid #000;
    font-weight:bold;
    cursor:pointer;
   
}

button.cta2
{
    background-color: #006600;
}

button.cta2:hover
{
   background-color:#009900;  
}
button.cancel
{
    background-color: #FF3300;
    margin-right:10px;
}
button.cancel:hover
{
    background-color: #FF7C5B;
}
button:hover, .cta:hover
{
    background-color:#0067C4
}
.btnRespond
{
        margin-left:10px;
}



/*------------------------------------------------------*/
.rating {
    float:left;
    margin-bottom:15px;
}

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
.rating .stars:not(:checked) > input[type="radio"] {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.rating .stars:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:2em;
    line-height:1.2;
    color:#ddd;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}

.rating .stars:not(:checked) > label:before {
    content: '★ ';
}

.rating .stars > input:checked ~ label {
    color: gold;
    text-shadow:1px 1px #c60, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating .stars:not(:checked) > label:hover,
.rating .stars:not(:checked) > label:hover ~ label {
    color: gold;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating .stars > input[type="radio"]:checked + label:hover,
.rating .stars > input[type="radio"]:checked + label:hover ~ label,
.rating .stars > input[type="radio"]:checked ~ label:hover,
.rating .stars > input[type="radio"]:checked ~ label:hover ~ label,
.rating .stars > label:hover ~ input[type="radio"]:checked ~ label {
    color: #ea0;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating .stars > label:active {
    position:relative;
    top:2px;
    left:2px;
}

.rating .stars
{
    float:left;    
}
.rating button
{
    margin-top:5px;
    float:left;
}

.details
{
    clear:both;    
    border-top: 1px dashed #aaa;
    margin-top:10px;
}

.bold
{
    font-weight:bold;    
}

.details .detailsection
{
    width:40%;
    float:left;    
    margin:10px;
}

.detailsection table td
{padding:0px; font-size:0.9em; color:#003366}


.description_Sidebar .detailsection
{
    margin:10px;    
}

.ratingsList
{
  background-color:#fff;  
}


#itemRatingsListContainer {}
#itemRatingsListContainer .itemRating
{
    clear:both;
    margin-top:20px;
    border-bottom:1px dashed #aaa;
    padding-bottom:20px;
}
#itemRatingsListContainer .itemRating:last-child
{
    border-bottom-width:0;
    }

#itemRatingsListContainer .itemRating_Rator 
{
    font-size:0.8em;
    float:left;
    width:25%;
    display:block;
    padding-top:0px;
    text-align:center;
}


.ratorLocation,
.ratorName
{
    display:block;    
}

.ratorName
{
    color:#39f;
}

.ratorTimestamp
{
    color:#606060;
    font-size:0.8em;
    margin-left:10px;
    font-weight:normal; 
}

#itemRatingsListContainer .itemRating_description
{
    border: 1px solid #aaa;
    float:left;
    width:60%;
    padding:20px;
    display:block;
    border-radius:5px;
}

#itemRatingsListContainer .itemRating_description .ratingResponse
{
    margin:15px 30px 0 30px;
    background-color:#F2F7FF;
    border:1px solid #666;
    border-radius: 4px;  
    padding:15px;  
}
.ratingControls
{

border:1px dashed #aaa;
border-left-width:0;
border-right-width:0;
clear:both;
padding:10px 0;
margin-right:20px;
 
}

.sortfield
{
    color: #39f;
    cursor:pointer;
}
.sortasc, .sortdesc
{
    font-weight:bold;
    color: inherit;    
}
.sortasc:after
{
 content: "\25B2"
}
.sortdesc:after
{
 content: "\25BC"
}

#AddReviewPanel
{
    margin:30px 30px 0 30px;
    background-color:#F2F7FF;
    border:1px solid #666;
    border-radius: 4px;  
    padding:15px; 
    display: none; 
    clear:both  
}

.form
{}


.form label
{
    display:block;
    float:left;
    width:150px;    
}

.form input
{
    display:block;
    float:left;
    padding:5px;
    border:1px solid #666;
    border-radius:4px;
}

.form input[type="checkbox"]
{
    border:none;    
}

.form li
{
    margin-bottom:10px;    
}

.form li input
{
    width:150px;    
}
input.checkbox
{
    width:auto !important;
    margin-right:10px;    
}

.validation-summary-errors
{
    color:#d45252;    
    margin-bottom:10px;
}

.padded
{
 padding:15px;   
}

fieldset
{
    padding: 15px !important;
    margin-left: 30px !important;
    border: 1px solid #666;
    border-radius: 7px;
    width: auto;
    background-color: #ECECFF;
}

.field-validation-error
{
    color: #d45252;    
    margin-left:20px;
}

.field-validation-error:before {
    content: "\25C0"; /* left point triangle in escaped unicode */
    color:#d45252;
    position: absolute;
    top:1px;
    left:-6px;
}
#loginButton
{
    margin-bottom:10px;    
}

.loginform
{
    margin-bottom:20px;    
}

#accountLinks
{
    background-color:#484848;
    padding:5px;
    margin-bottom:10px;
    border-radius: 0 0 5px 5px;
    
}


#accountLinks ul li
{
    float:left;
    display:block;
    margin-right:10px;
    color:#fff;  
}

#accountLinks ul li a
{
    color:#ccc;    
}
#accountLinks ul li a:hover
{
    text-decoration:underline;    
}        
        
.attributeSection
{        
 font-size:0.9em;
}

.attributeSection ul
{
    width:auto;
    float:left;
}        

.attributeSection ul li
{
    padding:8px 0 5px 0;
    white-space:nowrap;
}

.attributeSectionEntry
{
    width:auto;
    float:left;
    display:block;    
    margin-right:20px;
    margin-top:15px;
}

.attributeTag
{
    color: green;
    margin: 5px 10px 5px 0;
    border: 1px solid #aaa;
    border-radius: 5px;
    padding: 4px;
    width: 100%;
}

.attributeTag:before
{
    content:  "\2714  ";
}

.contentSection
{
 background-color:#fff;    
 padding:15px;   
 margin-bottom:10px;  
 border-radius:10px;
 display:block;
}


.contentSection_bottom
{
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    margin-bottom:0px;
}


.allVideos,
.allImages
{
    height:80px;
    width:80px;
    margin-right:20px;
    float:right;
}

.allImages
{
    margin-top:-200px;
    background-color:#f00;
}

.allVideos
{
    margin-top:-100px;
    background-color:#ff0;    
}

.descriptiveText
{
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:1px  dashed #666;        
}

.itemHeaderSummary
{
   float:right; width:30%;
   text-align:right;
   
}

.likeMe
{
    margin-right:20px;
    float:right;
    background-color:#ff0;
    margin-top:10px;
    padding:10px;
}

.ui-widget
{
    font-size:1em;    
}



#ratedItemListContainer .ui-widget-header
{
    background:#0078e7;
}


#ratedItemListContainer .ui-widget-header a
{
    font-size:0.9em;
}

#RatedItemListLeftPanel
{
    float:left;
    display:block;
    width:300px;
}

#RatedItemListContentPanel
{
    float:left;
    display:block;
    width:600px;
    
}

li.ratedItemTitle ul
{
    margin-left:30px;
    font-size:0.9em;
}

.expander
{
    margin-right:10px;
    border:1px solid #666;   
    cursor: pointer; 
    display:block;
    float:left;
    width:15px;
    text-align:center;
}
.expander:hover
{
    background:#0078e7;  
    color:#fff;  
}

.wide
{
    width:400px;    
}

textarea.wide
{
    height:200px;    
    
}

.attributeList
{
    border:1px solid #666;
    padding:10px;    
    background-color:#fff;
    width:auto;
}

.attributeList li
{clear:both;}

.attributeList li input
{
    width:auto;    
}

.reviewListTable
{
    width:100%;    
}

.dataTable th, .dataTable td
{
    text-align:left;
    padding:4px 2px;
}

.dataTable thead tr
{
    background-color:#0078e7;    
    color:#fff;
}

.dataTable tbody tr
{
    cursor:pointer;    
}

.dataTable tbody tr:hover td
{
    background-color: #D5EAFF;
}
